<script lang="ts">
	import Checkbox from '@smui/checkbox';
	import List, { Item, Graphic, Separator, Text } from '@smui/list';
	import Accordion, { Panel, Header, Content } from '@smui-extra/accordion';
	import { entries } from 'lodash-es';
	import { createEventDispatcher } from 'svelte';

	let clicked = 'nothing yet';
	export let list: IObject = [];
	export let checkedLists: { [key: string]: string[] } = {};

	const dispatch = createEventDispatcher();

	function handleAction(e: Event, key: string) {
		const target = e.target as HTMLInputElement;

		if (target) {
			// 多选请注释下面三行
			const status = target.checked;
			const value = target.value;
			checkedLists[key] = status ? [value] : [];

			dispatch('action');
		}
	}
</script>

<div class="w-360px bg-gray-1 h-full border border-b-solid border-gray-2 p-3">
	<Accordion
		multiple
		class="reset-shrink-panel reset-accordion-header-color flex flex-col gap-4px"
		style="--mdc-theme-surface: #e5e7eb"
	>
		{#each entries(list) as [key, item], index (index)}
			<Panel open={true} class="panel-top-tip">
				<Header>{key}</Header>
				<Content>
					{#if item}
						<List class="demo-list" dense>
							{#each entries(item) as [unit, num], k}
								<Item
									on:SMUI:action={() => (clicked = 'Edit')}
									activated={checkedLists[key]?.includes(unit)}
								>
									<Checkbox
										group={checkedLists[key]}
										on:change={(e) => handleAction(e, key)}
										value={unit}
										touch
									/>
									<span class="flex-1"><Text>{unit}</Text></span>
									<span>{num}</span>
								</Item>
							{/each}
						</List>
					{:else}
						<div class="color-gray-4 h-36px line-height-36px indent-40px px-16px">none</div>
					{/if}
				</Content>
			</Panel>
		{/each}
	</Accordion>
</div>
